<!--
	开发者:宋成恩
	开发时间:2017-7-9
	修改时间:2017-7-9
	功能:个人用户修改简历中的培训经历,单独的表单组件 ../PersonResume.vue中调用
-->
<template>
  <div id="resumeTrainingExperienceForm">
    <el-form :model="trainingExperienceInfo" :rules="trainingExperienceInfoRules" ref="trainingExperienceInfoInfoForm"
             label-width="110px">
      <el-row>
        <el-col :span="20">
          <el-form-item label="培训课程：" prop="train_class">
            <el-input v-model="trainingExperienceInfo.train_class" size="small" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="起始时间：" prop="start_date" required>
            <el-date-picker v-model="trainingExperienceInfo.start_date" type="date" size="small" placeholder="选择起始时间"
                            :picker-options="pickerOptions" :clearable="false" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="结束时间：" prop="finish_date" required>
            <el-date-picker v-model="trainingExperienceInfo.finish_date" type="date" size="small" placeholder="选择结束时间"
                            :picker-options="pickerOptions" :clearable="false" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="培训机构：" prop="train_institute">
            <el-input v-model="trainingExperienceInfo.train_institute" size="small" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="获得证书：" prop="train_certificate">
            <el-input v-model="trainingExperienceInfo.train_certificate" size="small" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="详细描述：" prop="describe">
            <el-input type="textarea" :autosize="{ minRows: 3}" v-model="trainingExperienceInfo.describe" size="small"
                      style="width:100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row v-if="trainingId !== 'add'">
      <el-col :span="5" :offset="1">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">培训证书正面照</div>
        <upload-image-card :config="uploadConfig" :parameter="positiveParameter"
                           :defaultImageUrl="trainingExperienceInfo.training_file_url1"
                           @sendUploadImageResponse="getPositiveImageResponse"></upload-image-card>
      </el-col>
      <el-col :span="5">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">培训证书反面照</div>
        <upload-image-card :config="uploadConfig" :parameter="negativeParameter"
                           :defaultImageUrl="trainingExperienceInfo.training_file_url2"
                           @sendUploadImageResponse="getNegativeImageResponse"></upload-image-card>
      </el-col>
    </el-row>
    <div class="btn-box">
      <el-button type="info" size="large" @click="checkTainingInfoData">保存</el-button>
      <el-button type="info" size="large" @click="cancelTainingInfoEdit">取消</el-button>
    </div>
  </div>
</template>

<script>
  import { postDataToServer } from '../../../assets/js/post.js'
  import { formatterTime } from '../../../assets/js/common.js'
  import UploadImageCard from '@/components/common/UploadImageCard'

  export default {
    name: 'resumeTrainingExperienceForm',
    props: ['resumeId', 'trainingId'],
    data () {
      var checkDate = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('时间不能为空'))
        } else {
          callback()
        }
      }
      return {
        uploadConfig: {
          type: 'HM_RESUME_TRAIN_IMG_ADD',
          width: '200px',
          height: '150px',
          tip: '<i style="color:red">* </i>请上传JPG或PNG格式的照片'
        },//正面
        positiveParameter: {
          id: '',
          train_type: 0
        },
        //反面
        negativeParameter: {
          id: '',
          train_type: 1
        },
        trainingExperienceInfo: {
          start_date: '',
          finish_date: '',
          train_class: '',
          train_institute: '',
          train_certificate: '',
          describe: ''
        },
        trainingExperienceInfoSpare: {
          start_date: '',
          finish_date: '',
          train_class: '',
          train_institute: '',
          train_certificate: '',
          describe: ''
        },
        trainingExperienceInfoRules: {
          start_date: [
            {validator: checkDate, trigger: 'change'},
            {validator: checkDate, trigger: 'blur'}
          ],
          finish_date: [
            {validator: checkDate, trigger: 'change'},
            {validator: checkDate, trigger: 'blur'}
          ],
          train_class: [
            {required: true, message: '请填培训课程', trigger: 'blur'},
            {min: 1, max: 120, message: '长度在 1 到 120 个字符', trigger: 'change'}
          ],
          train_institute: [
            {min: 0, max: 120, message: '最多可填写120个汉字', trigger: 'change'}
          ],
          train_certificate: [
            {min: 0, max: 120, message: '最多可填写120个汉字', trigger: 'change'}
          ],
          describe: [
            {min: 0, max: 200, message: '最多可填写200个汉字', trigger: 'change'}
          ]
        },
        pickerOptions: {
          disabledDate (time) {
            return Date.now() - 8.64e7 < time.getTime()
          }
        },
      }
    },
    components: {UploadImageCard},
    created () {
      if (this.trainingId !== 'add') {
        this.positiveParameter.id = this.trainingId
        this.negativeParameter.id = this.trainingId
        this.getTrainingExperienceInfo()
      } else {
        this.trainingExperienceInfo = this.trainingExperienceInfoSpare
      }
    },
    methods: {
      //正面
      getPositiveImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功')
          this.trainingExperienceInfo.training_file_url1 = data.portrait_url
        } else {
          this.$message.error(data.message)
        }
      },
      //反面
      getNegativeImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功')
          this.trainingExperienceInfo.training_file_url2 = data.portrait_url
        } else {
          this.$message.error(data.message)
        }
      },
      getTrainingExperienceInfo () {
        let _this = this
        let parameter = new Object()
        parameter.id = this.trainingId
        postDataToServer('HM_RESUME_TRAIN_GET', parameter).then((data) => {
          if (data.status === 0) {
            _this.trainingExperienceInfo = data.data_list
          }
        })
      },
      checkTainingInfoData () {
        let _this = this
        this.$refs['trainingExperienceInfoInfoForm'].validate((valid) => {
          if (valid) {
            _this.saveTainingInfoData()
          } else {
            this.$message({
              message: '存在数据填写错误！',
              type: 'error'
            })

          }
        })
      },
      saveTainingInfoData () {
        let _this = this
        let path = 'HM_RESUME_TRAIN_EDIT'
        if (this.trainingId === 'add') {
          path = 'HM_RESUME_TRAIN_ADD'
          this.trainingExperienceInfo.resume_id = this.resumeId
        }
        this.trainingExperienceInfo.start_date = formatterTime('date', this.trainingExperienceInfo.start_date)
        this.trainingExperienceInfo.finish_date = formatterTime('date', this.trainingExperienceInfo.finish_date)
        postDataToServer(path, this.trainingExperienceInfo).then((data) => {
          if (data.status === 0) {
            _this.$emit('sendEditTainingStatus', 'success')
          } else {
            _this.$message.error(data.message)
          }
        })
      },
      cancelTainingInfoEdit () {
        this.$emit('sendEditTainingStatus', 'cancel')
      }
    }
  }
</script>
<style scoped>
  .btn-box {
    width: 90%;
    text-align: center;
  }
</style>
